<!--
 * @Description: 在线用户管理
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2021-09-09 15:14:07
 * @LastEditTime: 2025-08-12 15:14:29
-->
<template>
  <TablePage
    ref="tablePageRef"
    v-model:cols="tableCols"
    v-model:toolsOptions="toolsOptions"
    v-model:rowBtnsOptions="rowBtnsOptions"
    :listRequest="getOnlineUsersByPage"
  >
    <template #toolsLeft="elTable">
      <el-button type="danger" @click="handleForcedExit(elTable)">
        <fy-icon name="Exit" size="13" color="white" class="mr-3" />
        批量强退
      </el-button>
    </template>
    <template #rowBtnsRight="scope">
      <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        title="确认强制退出?"
        @confirm="handleExit(scope)"
      >
        <template #reference>
          <el-button type="danger" link size="small">
            <fy-icon
              name="Exit"
              size="13"
              color="var(--el-color-danger)"
              class="mr-3"
            />
            强退
          </el-button>
        </template>
      </el-popconfirm>
    </template>
  </TablePage>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { FyTableInstance } from "@/ui";
import useTableCols from "./hooks/useTableCols";
import useToolsOptions from "./hooks/useToolsOptions";
import useRowBtnsOptions from "./hooks/useRowBtnsOptions";
import TablePage from "@/components/TablePage/index.vue";
import { getOnlineUsersByPage, forcedExit } from "@/api/monitor/index";
import { ElMessage } from "element-plus";

// 配置项
defineOptions({ name: "LoginLogs", isFull: true });

const tablePageRef = ref<Ref<typeof TablePage> | null>(null);

// 表格配置
const tableCols = useTableCols();
const rowBtnsOptions = useRowBtnsOptions();
const toolsOptions = useToolsOptions();

// 批量强退
const handleForcedExit = async (elTable: Ref<FyTableInstance>) => {
  // 删除
  const selection = elTable.value.selection;
  if (!(selection && selection.length)) {
    ElMessage.warning("请勾选一行！");
  } else {
    const { ok, message } = await forcedExit(
      selection.map((item: { id: string }) => item.id).join(",")
    );
    if (ok) {
      ElMessage.success(message);
      tablePageRef.value!.getList();
    }
  }
};

// 强退按钮
const handleExit = async (row: Record<string, string>) => {
  const { ok, message } = await forcedExit(row.id);
  if (ok) {
    ElMessage.success(message);
    tablePageRef.value!.getList();
  }
};
</script>
